<template>
  <div class='container-login' v-loading.fullscreen.lock="fullscreenLoading">
    <el-card>
     <div class="title">镇宁自治县物流系统登录</div>
      <!-- 表单 -->
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" status-icon>
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名">
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>
         <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input style="width:55%;margin-right:8px" v-model="loginForm.code" placeholder="请输入验证码"  @keyup.enter.native="login">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
          <div class="get-code" @click="refreshCode">
            <img :src="codeUrl? codeUrl:require('../../assets/timg.gif')" alt="">
          </div>
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="logisticLogin" plain size="medium" round class="loginBtn">登 录</el-button>
          <!-- <el-button  type="primary" @click="handleLoginTest" plain size="medium" round class="loginBtn">测试登录</el-button> -->
        </el-form-item>
      </el-form>
      <div class="footer">技术支持：重庆度牛电子商务有限公司</div>
    </el-card>

  </div>
</template>

<script>
import { encrypt } from '../../utils/crypto'
import { setItem } from '../../utils/storage'
export default {
  name: 'page-login',
  data () {
    // 自定义校验函数
    const checkUserName = (rule, value, callback) => {
      if (/^[a-zA-Z0-9_-]{2,10}$/.test(value)) {
        callback()
      } else {
        callback(new Error('请输入2-10位数字字母下划线'))
      }
    }
    const checkPassWord = (rule, value, callback) => {
      if (/^[0-9a-zA-Z]{5,8}$/.test(value)) {
        callback()
      } else {
        callback(new Error('请输入5-8位数字或者字母'))
      }
    }
    return {
      loginForm: {
        username: '',
        password: '',
        code: '',
        key: ''
      },
      encryptPass: '',
      codeUrl: '',
      fullscreenLoading: false,
      // 校验规则对象
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 需要自定义手机号的校验规则
          { validator: checkUserName, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 需要自定义密码的校验规则
          { validator: checkPassWord, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // 每次刷新页面的时候也要刷新验证码
    this.getInfo()
  },
  methods: {
    login (e) {
      e.preventDefault()
      if (e.keyCode === 13) {
        this.logisticLogin()
      }
    },
    async getInfo () {
      const res = await this.$http.get('/api/oauthApi/oauth/getCaptcha')
      if (res.status === 200 && res.data.code === 1) {
        const baseUrl = res.data.data.imgCode
        this.codeUrl = baseUrl
        this.loginForm.key = res.data.data.key
      } else if (res.status === 200 && res.data.code === 500) {
        this.$message.error('验证码错误')
      } else {
        this.$message.error('获取验证码失败')
      }
    },
    refreshCode () {
      this.getInfo()
    },
    // 点击登录
    logisticLogin () {
      // 整体表单校验
      this.$refs.loginForm.validate(async valid => {
      // valid代表是否整体校验成功
        if (valid) {
        // 发送请求
          this.fullscreenLoading = true
          this.encryptPass = encrypt(this.loginForm.password)
          const res = await this.$http.post('/api/oauthApi/oauth/login', {
            username: this.loginForm.username,
            password: this.encryptPass,
            code: this.loginForm.code,
            key: this.loginForm.key
          })
          if (res.status === 200 && res.data.code === 1) {
            setItem('userInfo', res.data.data)
            this.$router.push('/')
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            this.fullscreenLoading = false
            this.$refs.loginForm.resetFields()
          } else {
            this.fullscreenLoading = false
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
            this.$refs.loginForm.resetFields()
            this.getInfo()
          }
        } else {
          this.fullscreenLoading = false
          this.$message.error('用户名或验证码错误')
          this.$refs.loginForm.resetFields()
          this.getInfo()
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
.container-login{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url('../../assets/bg.jpg') no-repeat center / cover;
  .el-card {
    width: 384px;
    height: 375px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(0,0,0,.3);
    border: none;
    .title{
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 24px;
        margin-bottom: 10px;
        color: #fff;
    }
    .footer{
        font-size: 12px;
        text-align: center;
        margin-bottom: 0;
        color: #ccc;
        width: 370px;
    }
    .el-form{
      margin: 0 5% 0.5%;
      .get-code{
        width: 120px;
        background-color: rgba(225, 225, 225, .5);
        height: 40px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .el-input{
        background-color: transparent;
        border: none!important;
        /deep/.el-input__inner{
        background-color: transparent;
        color: #fff;
        border: none;
        }
      }
      .el-button{
        color: #fff;
        font-size: 14px;
        background-color: transparent;
        border: none;
      }
      .loginBtn{
        border: 2px solid rgb(7, 60, 141);
      }
    }
  }
}
</style>
